---
const clients = [
{
    name: "中汽数据",
    logo: "http://img.openauth.net.cn/2025-04-02-10-02-07.png",
    website: "https://www.catarc-adc.com/"
  },
  {
    name: "苏州智能制造研究院",
    logo: "http://img.openauth.net.cn/2025-04-02-09-25-46.png",
    website: "http://www.imrsz.com"
  },
  {
    name: "中煤航测",
    logo: "http://www.arscmh.com/template/1/default/_files/images/logo.png",
    website: "http://www.arscmh.com/"
  },
  
  {
    name: "成都市勘察测绘研究院",
    logo: "http://img.openauth.net.cn/2025-04-02-09-24-40.png",
    website: "https://www.cdkc.cn/"
  },
  {
    name: "国药控股",
    logo: "https://www.sinopharmholding.com/portals/0/Skins/Gone/img/logo.png",
    website: "https://www.sinopharmholding.com/"
  },
  
  {
    name: "中国石化中原油田",
    logo: "http://img.openauth.net.cn/2025-04-02-09-11-58.png",
    website: "http://zyof.sinopec.com/zpeb/"
  },
  {
    name: "中水北方勘测设计研究有限责任公司",
    logo: "http://img.openauth.net.cn/2025-04-02-09-56-31.png",
    website: "http://www.tidi.ac.cn/default.aspx"
  },
  
  {
    name: "重庆医药（集团）股份有限公司",
    logo: "https://cq-p.com.cn/cqpwps/images/index/logo_sys.gif",
    website: "https://cq-p.com.cn/"
  },
  
  {
    name: "爱仕达",
    logo: "http://asdrobotics.com/template/asd/images/logo.png",
    website: "http://asdrobotics.com/"
  },
  {
    name: "陕西航天汞阀",
    logo: "http://www.sxhtbf.com/uploadfiles/pictures/setting/20160316141249_1093.jpg",
    website: "http://www.sxhtbf.com/"
  },
  {
    name: "广州澳宝",
    logo: "https://zhengxin-pub.cdn.bcebos.com/logopic/6ff3cf1658391c72ea5a5d5061f7c43f_fullsize.jpg",
    website: "#"
  },
  {
    name: "公评网",
    logo: "http://www.17gp.com/images/logo5.png",
    website: "https://www.17gp.com/"
  },
  {
    name: "联方科技",
    logo: "http://www.ut-soft.cn/static/assets/img/logo/logo.png",
    website: "http://www.ut-soft.cn/"
  },
  {
    name: "esmartwave",
    logo: "https://files.esurl.cn/esmartwave/2018/img/yuanhui.png",
    website: "#"
  },
  {
    name: "鑫业网络",
    logo: "http://www.xinyegroup.com/templates/main/images/logo.png",
    website: "http://www.xinyegroup.com/"
  },
  {
    name: "拾牛网络",
    logo: "http://www.10nnet.com/upload/202302/09/202302091516234639.png",
    website: "http://www.10nnet.com/"
  },

  {
    name: "益诺思",
    logo: "http://img.openauth.net.cn/httpswww.innostar.cnimageslogo.png.png",
    website: "#"
  },
  {
    name: "洛克公园",
    logo: "https://zhengxin-pub.bj.bcebos.com/logopic/c0708069e4793d21658ddc101470c13a_fullsize.jpg",
    website: "#"
  },
  {
    name: "浙江正泰",
    logo: "http://www.chitic.com/public/images/logo_n.png",
    website: "http://www.chitic.com/"
  },

  {
    name: "山东青鸟软通",
    logo: "http://17795815.s21i.faiusr.com/4/1/ABUIABAEGAAg_I-5gwYo1cPD3QYw3AE4KA.png",
    website: "#"
  },
  
  {
    name: "深圳市新威尔电子有限公司",
    logo: "https://neware-web.oss-cn-shenzhen.aliyuncs.com/config/102E26Rc3.png",
    website: "https://www.neware.com.cn/"
  },
  {
    name: "友浩达",
    logo: "http://demo.openauth.net.cn:8887/upload_files/200516065826546.png", 
    website: "#"
  },
  {
    name: "聚房通",
    logo: "http://img.openauth.net.cn/2025-04-02-09-28-42.png",
    website: "http://www.cqjft.com/"
  },
  {
    name: "爱路恩济",
    logo: "http://img.openauth.net.cn/2025-04-02-09-29-54.png",
    website: "http://www.szilng.cn/"
  }

];

// 将客户数据分为多行，每行显示最多6个客户
const clientsPerRow = 6;
const rows = [];

for (let i = 0; i < clients.length; i += clientsPerRow) {
  rows.push(clients.slice(i, i + clientsPerRow));
}
---

<section id="clients" class="section py-8">
  <div class="container-custom">
    <div class="text-center max-w-3xl mx-auto mb-8">
      <h2 class="mb-3 text-gray-900 dark:text-white">我们的客户</h2>
      <p class="text-gray-600 dark:text-gray-300">
        与行业领先企业合作，提供卓越的解决方案
      </p>
    </div>
    
    <div class="overflow-hidden">
      {rows.map((row, rowIndex) => (
        <div class={`marquee-container ${rowIndex < rows.length - 1 ? 'mb-6' : ''}`}>
          <div class="gradient-mask"></div>
          <div class={`marquee ${rowIndex % 2 === 0 ? 'marquee-slow' : 'marquee-fast'}`}>
            {row.map((client) => (
              <a 
                href={client.website}
                target="_blank"
                rel="noopener noreferrer"
                class="client-logo-card flex items-center justify-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 mx-4 w-40 h-20"
              >
                <img 
                  src={client.logo} 
                  alt={`${client.name} 标志`} 
                  class="max-h-12 max-w-full transition-all duration-300"
                  loading="lazy"
                />
              </a>
            ))}
            {/* 复制一份同样的内容以实现无缝循环 */}
            {row.map((client) => (
              <a 
                href={client.website}
                target="_blank"
                rel="noopener noreferrer"
                class="client-logo-card flex items-center justify-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 mx-4 w-40 h-20"
              >
                <img 
                  src={client.logo} 
                  alt={`${client.name} 标志`} 
                  class="max-h-12 max-w-full transition-all duration-300"
                  loading="lazy"
                />
              </a>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  /* 跑马灯容器样式 */
  .marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  /* 左右渐变淡入淡出效果 */
  .gradient-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 5%,
      rgba(255, 255, 255, 0) 95%,
      rgba(255, 255, 255, 1) 100%
    );
    z-index: 2;
  }

  /* 深色模式下的渐变 */
  @media (prefers-color-scheme: dark) {
    .gradient-mask {
      background: linear-gradient(
        90deg,
        rgba(17, 24, 39, 1) 0%,
        rgba(17, 24, 39, 0) 5%,
        rgba(17, 24, 39, 0) 95%,
        rgba(17, 24, 39, 1) 100%
      );
    }
  }

  /* 跑马灯基础样式 */
  .marquee {
    display: flex;
    width: max-content;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    position: relative;
  }

  /* 不同速度的跑马灯 */
  .marquee-slow {
    animation-duration: 40s;
  }

  .marquee-fast {
    animation-duration: 20s;
  }

  /* 跑马灯动画 */
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* 淡入淡出效果 */
  .client-logo-card {
    transition: all 0.3s ease;
  }

  .client-logo-card:hover {
    transform: scale(1.05);
  }
</style>